<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.google.gson.Gson" %>
<%
  Context ctx = Context.get();
  Gson gson = new Gson();
  if ("klass".equals(ctx.action)) {
%>
<jsp:include page="<%=\"/WEB-INF/teach/class.jsp\"%>" />
<%
  } else {
    List<Map> classes = (List<Map>) ctx.data.get("class_list");
%>
<script type="text/javascript">
  var teach;
  var classes = [];
  $(document).ready(function() {
  <%
    if (classes != null) {
      for(Map klass : classes) {
  %>
    classes[<%= classes.indexOf(klass) %>] = new Class(<%= gson.toJson(klass) %>);
  <%
      }
    }
  %>
    teach = new Teach(classes);
    teach.show();
  });
</script>
<div id="class_list" style="width:100%;">
  <a class="f-right" onclick="$('#create_class').show();">
    Create class
  </a>
  <h3>Classes</h3>
  <div class="border-1" style="padding:8px;min-height: 256px;">
    <table style="width:100%;">
      <%
        if (classes == null || classes.size() == 0) {
      %>
      <tr>
        <td>
          No classes found.
        </td>
      </tr>
      <%
        } else {
      %>
      <tr>
        <td>Class title</td>
      </tr>
      <tr>
        <td>
          <hr />
        </td>
      </tr>
      <%
          for (Map klass : classes) {
      %>
      <tr>
        <td>
          <a href="/teach/class?id=<%= klass.get("id") %>">
            <%= klass.get("title") %>
          </a>
        </td>
      </tr>
      <%
          }
        }
      %>
    </table>
  </div>
</div>
<div id="create_class" class="p-absolute d-none popup" style="right:32px;top:16px;">
  <div class="popup-close"><a onclick="$('#create_class').hide()">&#215;</a></div>
  <h3>Create class</h3>
  <hr />
  <div style="width: 480px;">
    <form action="/teach/create_class" method="POST">
    <table style="width:100%;">
      <tr>
        <td class="a-left">
          <label for="title">
            Class title :
          </label>
        </td>
        <td class="a-center">
          <input name="class_title" type="text" />
        </td>
        <td class="a-right">
          <input type="submit" value="Create class" />
        </td>
      </tr>
    </table>
    </form>
  </div>
</div>
<div id="class_details" class="d-none" style="width:100%;">
  <a class="f-right" onclick="teach.showClasses()">
    Return to dashboard
  </a>
  <h3>
    Class details
  </h3>
  <div id="class_navigation">
    <a onclick="">
      <div>
        Students
      </div>
    </a>
    <a onclick="">
      <div>
        Assignments
      </div>
    </a>
    <a onclick="">
      <div>
        Grades
      </div>
    </a>
  </div>
  <div id="students" class="border-1" style="padding:8px;">
    Class details!
  </div>
</div>
<div class="clear"></div>
<%
  }
%>